<style lang="scss" scoped="">
  h3 {
    margin-top: 30px;
  }

  .chart-list {
    display: flex;
    flex-wrap: wrap;
    > div {
      margin-right: 15px;
      &:nth-child(6n) {
        margin-right: 0;
      }
    }
  }

  .chart-item {
    width: 182px;
    margin-top: 15px;

    .image {
      height: 140px;
      width: 100%;
    }
    .item-title {
      padding: 10px;
      white-space: nowrap;
      display: flex;
      align-items: center;
      justify-content: space-between;
      .item-title-text {
        display: inline-block;
        max-width: 120px;
        overflow: hidden;
        text-overflow: ellipsis;
      }
    }
  }
</style>
<template>
  <div>
    <div class="container">
      <h3 class="clearfix">
        图表列表
        <span class="pull-right">

          <el-button @click.prevent.stop="addChart()" size="small">增加</el-button>

        </span>
      </h3>
      <div class="chart-list">
        <div v-for="chart in chartList" :key="chart.chartId">
          <router-link :to="pathUrl+'chart/'+(chart.chartId)">
            <el-card :body-style="{ padding: '0px' }" class="chart-item">
              <img :src="chart.url" class="image">
              <div class="item-title">
                <span class="item-title-text">{{chart.title}}</span>
                <el-button type="text" size="mini" @click.stop.prevent="removeChart(chart)">删除
                </el-button>
              </div>
            </el-card>
          </router-link>
        </div>

      </div>
      <!--<h3 class="clearfix">
        仪表列表
        <span class="pull-right">
          <el-button @click="showRight=true" size="small">增加</el-button>
        </span>
      </h3>

      <h3 class="clearfix">
        故事列表
        <span class="pull-right">
          <router-link :to="pathUrl+'chart/new'">
          <el-button @click="showRight=true" size="small">增加</el-button>
          </router-link>
        </span>
      </h3>
-->
    </div>
    <page-right :show="showRight" @right-close="resetRightBox">
      <edit-form :formItem="form" :title="formTitle" :action="action"
                 @close="showRight=false"
                 @change="itemChange"></edit-form>
    </page-right>
  </div>
</template>

<script>
  import editForm from './form/form.vue';
  import {http, chart} from '@/resources';
  import chartMix from '@/mixins/chartMix';

  export default {
    components: {
      editForm
    },
    mixins: [chartMix],
    data() {
      return {
        currentDate: this.$moment().format('YYYY-MM-DD HH:mm:ss'),
        menu: [],
        showRight: false,
        formTitle: '新增',
        action: 'add',
        form: {},
        chartList: []
      };
    },
    computed: {
      pathUrl: function () {
        let path = this.$route.path;
        return path.substr(0, path.lastIndexOf('/') + 1);
      }
    },
    mounted() {
      this.getChartList();
    },
    methods: {
      getChartList() {
        chart.query({type: 'project', id: this.$route.params.projectId}).then(res => {
          this.chartList = res.data.data;
        });
      },
      resetRightBox() {
        this.showRight = false;
      },
      itemChange: function (e) {

      },
      removeChart(item) {
        this.$confirm('是否确认删除', '', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          chart.delete(item.chartId).then(res => {
            this.chartList.splice(this.chartList.indexOf(item), 1);
          });
        });
      }
    }
  };

</script>
